<template>
  <!-- 模板 -->
  <div class="Fg-temps">
    <template v-for="(item,i) in temps">
      <div :key="i" class="Fg-temps-item">
        <el-popover placement="right" width="600" trigger="hover">
          <el-image :src="item.image" slot="reference"></el-image>
          <el-image :src="item.image"></el-image>
        </el-popover>
        <div class="Fg-temps-item--footer">
          <span>#{{i+1}} {{item.name}}</span>
          <span @click="handleLoad(item)">加载此模板</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { MessageBox } from "element-ui";
// 模板数据
import temps from "../utils/temps";
import { createFormItem, deepClone } from "../utils";
export default {
  data() {
    return {
      temps,
    };
  },
  methods: {
    // 加载此模板
    handleLoad(item) {
      MessageBox.confirm("是否加载这个模板？加载后会覆盖设计器当前表单。", {
        type: "warning",
        title: "提示",
      }).then(() => {
        const temps = [];
        item.form.forEach((formItem) => {
          temps.push(createFormItem(deepClone(formItem)));
        });
        this.$emit("change", temps);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../styles/generator.scss";
.Fg-temps {
  padding: 8px;
  font-size: 14px;
  .Fg-temps-item {
    margin-bottom: 8px;
    border: 1px solid $borderColor;
    border-radius: 4px;
    padding: 12px 16px;
    .el-image {
      width: 100%;
    }
    .Fg-temps-item--footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      span:first-child {
        font-weight: 700;
      }
      span:last-child {
        color: $themeColor;
        cursor: pointer;
      }
    }
  }
}
</style>